<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用 props 传递数据 - 使用 v-bind 来动态绑定 props 的值</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="parentMessage" placeholder="请输入...">
        <!-- 使用 v-bind 来动态绑定 props 的值 -->
        <my-component :message="parentMessage"></my-component>
    </div>
</body>

<script type="text/javascript">
    // 注册组件
    // Vue 组件的模板在某些情况下会收到 HTML 限制，例如 <table> 内只允许  <tr>、<th>、<td> 等这些元素
    // Vue 2.x 通过 props 传递数据是单向的，也就是父组件数据变化时会传递给子组件，但是反过来不行
    Vue.component('my-component', {
        props:['message'],
        template:'<div> 来自父组件的数据： {{message}} </div>'
    });

    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app",
        data:{
            parentMessage:""
        }
    })
</script>

</html>